<template>
  <div>
    <el-card shadow="never">
      <div class="card-query">
        <div>
          <el-input v-model="search" placeholder="输入关键字搜索" />
        </div>
        <div>
          <el-button
            icon="el-icon-document-add"
            type="primary"
            @click="handleAdd"
            v-if="isHedden == true"
            >添加</el-button
          >
          <el-button type="info" icon="el-icon-document-add" disabled v-else
            >添加</el-button
          >
          <el-button
            icon="el-icon-refresh"
            type="primary"
            @click="handleRefresh"
            >刷新</el-button
          >
        </div>
      </div>
    </el-card>

    <el-table
      :data="
        tableData.filter(
          (data) =>
            !search ||
            data.username.toLowerCase().includes(search.toLowerCase())
        )
      "
      border=""
      :header-cell-style="{ textAlign: 'center' }"
      :cell-style="{ textAlign: 'center' }"
    >
      <el-table-column label="ID">
        <template slot-scope="scope">
          <i class="el-icon-pear"></i>
          <span>{{ scope.row.id }}</span>
        </template>
      </el-table-column>
      <el-table-column label="管理员账号">
        <template slot-scope="scope">
          <el-popover
            trigger="hover"
            placement="top"
            v-for="item in scope.row.adminInfo"
            :key="item.id"
          >
            <p>昵称: {{ item.realName }}</p>
            <p>性别: {{ item.sex }}</p>
            <p>生日: {{ getDate(item.birthday) }}</p>
            <p>地址: {{ item.address }}</p>
            <p>自我介绍: {{ item.selfIntroduction }}</p>
            <div slot="reference" class="name-wrapper">
              <el-tag size="medium">{{ scope.row.username }}</el-tag>
            </div>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column label="管理员密码">
        <template slot-scope="scope">
          <div slot="reference" class="name-wrapper">
            <label for="">......</label>
            <el-tag size="medium" style="display: none">{{
              scope.row.password
            }}</el-tag>
          </div>
        </template>
      </el-table-column>
      
      <el-table-column label="备注">
        <template slot-scope="scope">
          <div>
            {{ scope.row.remarks }}
          </div>
        </template>
      </el-table-column>
      <el-table-column label="是否启用">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.isEnable"
            @change="change(scope.$index, scope.row)"
            v-if="isHedden == true"
          >
          </el-switch>
          <el-switch
            v-model="scope.row.isEnable"
            @change="change(scope.$index, scope.row)"
            disabled
            v-else
          >
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="handleEdit(scope.$index, scope.row)"
            v-if="isHedden == true"
            >编辑</el-button
          >
          <el-button
            size="mini"
            @click="handleEdit(scope.$index, scope.row)"
            disabled
            v-else
            >编辑</el-button
          >
          <el-popconfirm
            title="确定删除吗？"
            @confirm="handleDelete(scope.$index, scope.row)"
          >
            <el-button
              size="mini"
              type="danger"
              slot="reference"
              v-if="isHedden == true"
              >删除</el-button
            >
            <el-button
              size="mini"
              type="danger"
              slot="reference"
              disabled
              v-else
              >删除</el-button
            >
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      title="管理员信息"
      :visible.sync="dialogFormVisible"
      width="500px"
    >
      <el-form ref="form" :model="form" :rules="rules">
        <el-form-item
          label="管理员账号"
          :label-width="formLabelWidth"
          prop="username"
        >
          <el-input v-model="form.username" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
          label="管理员密码"
          :label-width="formLabelWidth"
          prop="password"
        >
          <el-input v-model="form.password" autocomplete="off" type="password"></el-input>
        </el-form-item>
        <el-form-item
          label="管理员姓名"
          :label-width="formLabelWidth"
          v-if="form.id == undefined"
          prop="realName"
        >
          <el-input v-model="form.realName" autocomplete="off"></el-input>
        </el-form-item>
        

        <el-form-item
          label="备注"
          :label-width="formLabelWidth"
          
        >
          <el-input v-model="form.remarks" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="resetForm('form')">取 消</el-button>
        <el-button type="primary" @click="confirm('form')">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 分页 -->
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pager.pageIndex"
        :page-size="pager.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pager.rowsTotal"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>

export default {
  //data保存的数据(默认值)
  data() {
    return {
      tableData: [],
      pager: {
        pageIndex: 1,
        pageSize: 10,
        rowsTotal: 10,
      },
      dialogFormVisible: false,
      form: {
        id: 0,
        isEnable: false,
        username: "",
        password: "",
        realName: "",
        remarks: "",
      },
      formLabelWidth: "120px",
      //当前下标
      nowIndex: 0,
      search: "",
      isHedden: true,
      rules: {
        username: [
          { required: true, message: "请输入管理员账号", trigger: "blur" },
        ],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
        realName: [
          { required: true, message: "请输入管理员姓名", trigger: "blur" },
        ],
      },
    };
  },
  //mounted是vue中的一个钩子函数，一般在初始化页面完成后，再对dom节点进行相关操作
  mounted() {
    // this.fetchData(this.pager);
    // if (localStorage.getItem("id") == 1) {
    //   this.isHedden = true;
    // } else {
    //   this.isHedden = false;
    // }
  },
  // metheds  函数提前定义（ 类似提前声明变量 进入页面内容全部渲染完成后自动引函数）
  methods: {
        handleSizeChange () {

    },
    // 监听页码值改变的事件
    handleCurrentChange () {
 
    },
    change(index, row) {
      console.log(index, row);
      this.form.isEnable = row.isEnable;
      
    },
    //添加
    handleAdd() {
      this.dialogFormVisible = true;
      this.form = {};
    },
    //刷新
    handleRefresh() {
      location.reload();
    },
    //查询
    handleQuery() {},
    //编辑
    handleEdit(index, row) {
      this.dialogFormVisible = true;
      this.form = row;
      //获取下标
      this.nowIndex = index;
      console.log(index, row);
    },
    //删除
    handleDelete(index, row) {
      console.log(index, row);
      console.log(row.id);
    },
 
    
    //确认信息（添加和编辑）
    confirm() {
     
    },
    //重置
    resetForm() {
      this.dialogFormVisible = false;
    },

  },
};
</script>
<style scoped>
.card-query,
.form-query {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.btnQuery {
  margin-left: 10px;
}
.form-query .el-form-item {
  margin-bottom: 0px;
}
.block {
  text-align: center;
}
</style>
